<template>
    <div class="">

        <el-card class="" shadow="always">
            <div class="flex items-center">
                <el-form ref="ruleFormRef" :model="formData" :rules="formRules" label-width="60px" class="w-[500px]">
                    <el-form-item label="域名" prop="optName" required style="margin-bottom:0px;">
                        <!-- <el-tooltip class="box-item" effect="dark" placement="top-start">
                            <template #content>
                                <div class="">
                                    如需填写多个域名，请enter填写，每个选项是一个域名，默认为80端口
                                    <br>泛解析添加方法 *.domain.com
                                    <br>如另加端口格式为 www.domain.com:88
                                </div>
                            </template>
                            <el-select
v-model="formData.optName" class="select-c w-[100%]" multiple filterable
                                allow-create default-first-option :reserve-keyword="false" placeholder="请输入">
                            </el-select>

                        </el-tooltip> -->

                        <el-input
v-model="formData.optName" type="text" placeholder="请输入" clearable show-word-limit
                            maxlength="220" />
                    </el-form-item>

                </el-form>
                <div class="ml-12px">
                    <el-button type="primary" size="small" @click="addHandle(ruleFormRef)">
                        <Icon icon="ant-design:plus-outlined" class="mr-5px" />添加
                    </el-button>
                </div>
            </div>
        </el-card>



        <!-- <PlusOutlined /> -->
        <el-table
:data="pageData.list" v-loading="loading" header-row-class-name="cc-table" border
            highlight-current-row style="width: 100%;margin-top: 20px;">
            <el-table-column prop="domainName" label="域名" show-overflow-tooltip />
            <el-table-column prop="port" label="端口" width="60" show-overflow-tooltip />
            <el-table-column fixed="right" label="操作" width="60">
                <template #default="scope">
                    <el-button link type="primary" size="small" @click="delHandle(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue"
import { listWebDomainsAPI, webDomainManagePhpWebAPI } from "@/api/systemMonitor/site"
import { propTypes } from '@/utils/propTypes'
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'

const emit = defineEmits(['confirm'])
const props = defineProps({
    info: propTypes.object.def(undefined)
})

//table loading
const loading = ref(false)

const pageData = reactive({
    list: null,
})

const formData = reactive({
    optName: ""
})
const ruleFormRef = ref<FormInstance>()
const formRules = reactive<FormRules>({
    optName: [
        { required: true, message: '此项必填', trigger: 'blur' },
    ],
})


onMounted(() => {
    queryFirstHandle()
})

//查询第一页
const queryFirstHandle = () => {
    searchHandle()
}

//查询
const searchHandle = () => {
    loading.value = true;
    listWebDomainsAPI({ domainName: props.info.domainName }).then((res) => {
        pageData.list = res.data
    }).finally(() => {
        loading.value = false;
    })
}
//删除
const delHandle = (row) => {
    ElMessageBox.confirm('确认要删除这一项?', '警告', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
        customClass: 'delete-dialog'
    }).then(() => {
        webDomainManagePhpWebAPI({
            domainName: props.info.domainName,
            optName: row.domainName,
            opt: "delete"
        }).then(() => {
            ElMessage.success("删除成功")
            queryFirstHandle();
        })
    }).catch(() => { })
}
//添加
const addHandle = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            console.log('submit!')
            loading.value = true;
            webDomainManagePhpWebAPI({
                ...formData,
                domainName: props.info.domainName,
                opt: "add"
            }).then(() => {
                formData.optName=""
                ElMessage.success("添加成功")
                queryFirstHandle();
                emit('confirm')
            }).finally(() => {
                loading.value = false;
            })
        } else {
            console.log('error submit!', fields)
        }
    })
}
</script>